<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
			
		<title>Monaco Standup Page</title>
		
		<!-- Bootstrap -->
		<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<script src="lib/jquery/jquery-1.11.0.min.js"></script>
		<script src="lib/bootstrap/js/bootstrap.min.js"></script>
		<script src="lib/bootstrap/js/docs.min.js"></script>
    
    <link href="style.css" rel="stylesheet">
		
		<!-- Socket.io -->
		<script src="/socket.io/socket.io.js"></script>
		
		<!-- Require.js -->
		<script data-main="scripts/main" src="lib/requirejs/require.js"></script>
		
		<!-- Main -->
		<script>
			require.config({
        shim: {
          'socketio': {
            exports: 'io'
          },
          'jquery': {
              exports: '$'
          },
        },
        paths: {
          socketio: '../socket.io/socket.io',
          jquery: '/lib/jquery/jquery-1.11.0.min',
        },
				baseUrl: '/',
      });
      
      var formatDate = (function() {
        var d_names = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
      
        return function(d) {
          var curr_day = d.getDay();
          var curr_date = d.getDate();
          var sup = "";
          if (curr_date == 1 || curr_date == 21 || curr_date ==31) {
            sup = "st";
          } else if (curr_date == 2 || curr_date == 22) {
            sup = "nd";
          } else if (curr_date == 3 || curr_date == 23) {
            sup = "rd";
          } else { 
            sup = "th";
          }
          
          var curr_month = d.getMonth();
          var curr_year = d.getFullYear();
          
          return (d_names[curr_day] + ", " + curr_date + "<SUP>" + sup + "</SUP> " + m_names[curr_month] + " " + curr_year);
        };
      })();
      
      require(['main', 'jquery'], function(main, jquery) {
        
        // Date
        $('#navdate').html(formatDate(new Date()));
        
        // Background Image
        $.ajax({
          url: "/image",
        }).done(function(data) {
          if (data && data.url) {
            var url = data.url;
            var label = data.label;
            if (label && label.indexOf('(') > 0) {
              label = label.substr(0, label.indexOf('('));
            }
            
            $(document.body).css({
              backgroundImage: 'url(' + url + ')',
              backgroundRepeat: 'no-repeat',
              backgroundSize: 'cover'
            });
            
            // Label
            $('#navlabel').html(label);
          }
        });
      });
		</script>
	</head>
	<body>
		
    <!-- Navbar
    ================================================== -->
		<nav class="navbar navbar-default" role="navigation">
		  <div class="container-fluid">
		    
        <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		        <span class="sr-only">Toggle navigation</span>
		      </button>
		      <span class="navbar-brand" id="navdate"></span>
		      <span class="navbar-text" id="navlabel"></span>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="https://stand-dev.scm.azurewebsites.net/dev/wwwroot/config.js" target="_blank">Edit</a></li>
		      </ul>
		    </div>
		  </div>
		</nav>
    
    <!-- List of Stage
    ================================================== -->
    <div class="container">
      <div class="list-group">
        <span class="list-group-item list-group-item-transparent">
          <div class="btn-group btn-group-justified">
            <div class="btn-group">
              <button type="button" class="btn btn-primary" id="start" data-toggle="modal" data-target="#recordingAlert"><span class="glyphicon glyphicon-play"></span></button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-primary" id="shuffle"><span class="glyphicon glyphicon-random"></span></button>
            </div>
             <div class="btn-group">
              <button type="button" class="btn btn-primary" id="previous"><span class="glyphicon glyphicon-backward"></span></button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-primary" id="next"><span class="glyphicon glyphicon-forward"></span></button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-primary" id="stop"><span class="glyphicon glyphicon-stop"></span></button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-primary" id="music"><span class="glyphicon glyphicon-music"></span></button>
            </div>
          </div>
        </span>
        <span id="stage"></span>
      </div>
    </div>
		
    <!-- Recording Alert
    ================================================== -->
    <div class="modal fade" id="recordingAlert" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <h4>Please start recording!</h4>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Monaco Theme
    ================================================== -->
    <audio>
    	<source src="monaco.mp3"></source>
    </audio>
      
	</body>

</html>